<template>
  <div class="login" :style="{
      'background-image': 'url(' + backgroundImg + ')',
    }">
    <div style="position: absolute;
    right: 55px;
    top: 25px;"><a style="color: wheat;margin-right: 20px">操作手册</a><a style="color: wheat">操作视频</a></div>
    <!-- 登录框 -->
    <div class="main login_panel_class">
      <div v-if="isShowScanningLogin" class="login-mode" :style="{
          backgroundImage: `url(${isScanningLogin ? Computer_img : Code_img})`,
        }" @click="isScanningLogin = !isScanningLogin" />
      <!-- 账号密码登录 -->
      <div style="flex: 1">
        <el-form v-show="!isShowScanningLogin || !isScanningLogin" ref="ruleForm" style="margin-bottom: 64px"
          :model="formModel">
          <!-- 标题 -->
          <p class="title">
            <span v-if="titlePrefix && isShowItemName">{{ titlePrefix }} 登录</span>
            <span v-else>密码登录</span>
          </p>

          <!-- 账号 -->
          <el-form-item required>
            <el-input v-model="formModel.loginName" placeholder="请输入登录名/手机号" size="large" />
          </el-form-item>

          <!-- 密码 -->
          <el-form-item required>
            <el-input v-model="formModel.password" type="password" placeholder="请输入登录密码" size="large"
              @keyup.native="keyup" />
          </el-form-item>

          <!-- 获取短信验证码 -->
          <el-form-item required class="sendCode">
            <el-input v-model="vCode" placeholder="请输入验证码" class="my-input" style="width: 200px; margin-right: 5px"
              size="large" @keyup.enter.native="submitForm" />
            <el-button style="height: 40px; width: 95px" size="small" type="primary" :disabled="(disabled = !showCode)"
              @click="getSendCode">
              <span v-show="showCode">获取验证码</span>
              <span v-show="!showCode" class="count">{{ count }} s</span>
            </el-button>
          </el-form-item>
          <p v-show="showErrorMessage" class="alert">{{ errorMessage }}</p>
          <el-form-item>
            <el-button class="login-button" size="medium" style="width: 100%; background-color: #0078d7; color: #fff"
              @click="submitForm">登录</el-button>
          </el-form-item>
        </el-form>
        <!-- 忘记密码？ -->
        <div v-show="!isShowScanningLogin || !isScanningLogin">
          <span style="
              position: absolute;
              bottom: 30px;
              left: 284px;
              color: #1890FF;
              cursor: pointer;
            " @click="TransLink">忘记密码</span>
        </div>
        <!-- 二维码扫码登录 -->
        <div v-show="isScanningLogin" id="wx_reg" />
      </div>
    </div>

  </div>
</template>
<script>
  import {
    IsNull
  } from '@/utils/utils'
  export default {
    name: "login",
    data() {
      return {
        backgroundImg: 'https://img.tukuppt.com/bg_grid/00/03/40/luPEIUuasp.jpg!/fh/350',
        // backgroundImg: 'https://img.tukuppt.com/bg_grid/00/06/42/pO6xd1Zevl.jpg!/fh/350',
        // backgroundImg: 'https://img.tukuppt.com/bg_grid/00/12/87/ORa9UsmJlI.jpg!/fh/350',
        // backgroundImg: 'https://img.tukuppt.com/bg_grid/00/42/41/xXT9LHgXFU.jpg!/fh/350',
        Computer_img: 'https://uap.cict.com/img/Computer_img.png',
        Code_img: 'https://uap.cict.com/img/Code_img.png',
        // 是否显示微信扫码登录
        isShowScanningLogin: true,
        // 是否选择了扫码登录
        isScanningLogin: true,
        // 是否显示企业名字
        isShowItemName: false,
        showCode: true, // 显示倒计时
        errorMessage: '', //表单校验提示信息
        //登录名和密码
        formModel: {
          loginName: '',
          password: ''
        },
        titlePrefix: null, //什么方式登录
        vCode: '', // 短信验证码的值
        count: '', // 初始化次数，自定义倒计时间
        timer: null, // 清除定时器的效果
      };
    },
    created() {
    },
    mounted() {
      this.WechatLogin()
    },
    computed: {
      // 是否显示错误信息
      showErrorMessage() {
        return !IsNull(this.errorMessage)
      },
    },
    methods: {
      keyup(event) {
        if (event.keyCode === 13) {
          this.submitForm()
        }
      },
      //点击提交登录
      submitForm() {
        const loginName = this.formModel.loginName
        const password = this.formModel.password
        if (IsNull(loginName)) {
          this.errorMessage = '请输入登录名'
          return
        }
        if (IsNull(password)) {
          this.errorMessage = '请输入密码'
          return
        }
        if (IsNull(this.vCode)) {
          this.errorMessage = '请输入验证码'
          return
        }
        console.log('login')
      },
      // 验证手机号，发送验证码的请求
      getSendCode() {
        const loginName = this.formModel.loginName
        const password = this.formModel.password
        if (IsNull(loginName)) {
          this.errorMessage = '请输入登录名'
          return
        }
        if (IsNull(password)) {
          this.errorMessage = '请输入密码'
          return
        }
        // 验证手机号
        const TIME_COUNT = 60 // 更改倒计时时间
        if (!this.timer) {
          this.errorMessage = ''
          this.count = TIME_COUNT
          this.showCode = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.showCode = true
              clearInterval(this.timer) // 清除定时器
              this.timer = null
            }
          }, 1000)
        } 
      },
      //忘记密码
      TransLink() {
        this.$router.replace({
          path: '/autocode'
        })
      },
      //微信扫码登录 配置参数，显示二维码
      WechatLogin(){
        window.WwLogin({
        id: 'wx_reg',
        appid: '',
        agentid: '',
        redirect_uri: '',
        state: '',
        href: ''
      })
      }
    }
  };

</script>
<style scoped>
  .login {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 120px;
    padding-right: 133px;
    text-align: center;
    background-size: cover;
  }

  .main {
    position: absolute;
    right: 13%;
    width: 400px;
    height: 400px;
    padding: 20px 50px;
    border-radius: 6px;
    box-sizing: border-box;
    margin-right: 50px;
    flex-direction: column;
    background-color: hsla(0, 0%, 100%, 0.7);
  }

  .main .login-mode {
    background-size: 100% 100%;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
  }

  .main .title {
    font-size: 18px;
    color: #444;

  }

  .main .title span {
    margin-right: 10px;
  }

  .main .alert {
    color: red;
    text-align: left;
    font-size: 13px;
  }

  @media (min-width: 1024px) {
    .login_panel_class {
      bottom: 20%;
    }
  }

  /*>=1024的设备*/

  @media (min-width: 1100px) {
    .login_panel_class {
      bottom: 20%;
    }
  }

  /*>=1024的设备*/
  @media (min-width: 1280px) {
    .login_panel_class {
      bottom: 20%;
    }
  }

  @media (min-width: 1366px) {
    .login_panel_class {
      bottom: 20%;
    }
  }

  @media (min-width: 1440px) {
    .login_panel_class {
      bottom: 24%;
    }
  }

  @media (min-width: 1680px) {
    .login_panel_class {
      bottom: 28%;
    }
  }

  @media (min-width: 1920px) {
    .login_panel_class {
      bottom: 32%;
    }
  }

</style>
